<script>
import axios from 'axios'
export default {
  name: 'UserListView',
  data () {
    return {
      userList: [],
      pageInfo: {
        page: 1,
        pageSize: 5
      },
      count: 0
    }
  },
  methods: {
    getUserList () {
      axios({
        url: '/api/userinfo',
        method: 'get',
        params: {
          param: 'list',
          ...this.pageInfo
        }
      }).then(({ data }) => {
        this.userList = [...data.data.list]
        this.pageInfo.page = data.data.page
        this.pageInfo.pageSize = data.data.pageSize
        this.count = data.data.count
      })
    }
  },
  created () {
    this.getUserList()
  }
}
</script>

<template>
<div>
  <table width="50%" border="1">
    <tr>
      <th>编号</th>
      <th>用户名</th>
      <th>昵称</th>
      <th>角色</th>
      <th>状态</th>
    </tr>
    <tr v-for="user in userList" :key="user.id">
      <td>{{user.id}}</td>
      <td>{{user.username}}</td>
      <td>{{user.nickname}}</td>
      <td>{{user.roleName}}</td>
      <td>
        <template v-if="user.status === 1">可用</template>
        <template v-else>禁用</template>
      </td>
    </tr>
  </table>
</div>
</template>

<style scoped lang="scss">

</style>
